<template>
	<el-row class="hotpicadd">
		<div class="div1">
			<div class="div1-1">
				<p class="div1-1-p1"><i class="el-icon-s-data"></i>热度图片添加-{{typemsg[type]}}</p>
			</div>
			<button @click="go2List()">返回列表</button>
			<button @click="add()">保存</button>
			<!-- <button @click="add()" v-show="type==1">保存</button> -->
			<!-- <button @click="add()" v-show="type==2">保存</button> -->
		</div>
		<hr>
		<el-row class="big">
			<el-col>
				<p>图片:<input type="file" ref="pic"></p>
			</el-col>

			<el-col>
				<el-form label-width="120px" :model="hot">
					<el-form-item label="类型-整数">
						<el-input v-model="hot.type"></el-input>
						<p>类型可自定义： 1=轮播图 2=广告 ....</p>
					</el-form-item>
					<el-form-item label="优先级-整数">
						<el-input v-model="hot.hot"></el-input>
						<p>数字越大，显示在前面</p>
					</el-form-item>
					<el-form-item label="描述">
						<el-input type="textarea" :rows="4" placeholder="请输入信息" v-model="hot.memo">
						</el-input>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</el-row>
</template>

<script>
	export default {
		name: 'HotPicAdd',
		data() {
			return {
				input2: '',
				fileList: [],
				hot: {},
				typemsg: ['显示', '添加', '修改'],
				type: 1, //1是添加 2是修改
			};
		},
		methods: {
			// 文件上传
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			// 跳转到热点图片页面
			go2List() {
				this.$router.push({
					path: '/adm/hotPic'
				})
			},
			add() {
				// 介绍、图片、热度、类型
				let fd = new FormData();
				if (this.hot.id != null) {
					fd.append('id', this.hot.id);
				} else {
					fd.append('id', 0)
				}
				fd.append("memo", this.hot.memo);
				fd.append("hot", this.hot.hot);
				fd.append("type", this.hot.type);
				let content = this.$refs.pic.files[0];
				fd.append("pic", content);
				this.$postf("/api/adm/hot/add", fd)
					.then((resp) => {
						console.log(resp.data);
						console.log(resp.data.data);
						this.hotList = resp.data.data;
					})
			},

		},
		mounted() {
			console.log(this.$route.query.id);
			if (this.$route.query.id != 0) {
				this.$get("/api/adm/hot/findById/" + this.$route.query.id)
					.then((resp) => {
						console.log(resp.data);
						this.hot = resp.data.data;
						this.type = 2;
					})
			} else {
				this.type = 1;
			}
		}
	}
</script>

<style scoped>
	/* <!-- 右侧功能 */
	.hotpicadd {
		margin-left: 20px;
		width: 100%;
		height: 600px;
		line-height: 50px;
	}

	.div1 {
		margin-top: 18px;
		display: flex;
		justify-content: space-between;
		margin-bottom: -9px;
		width: 500px;
	}

	.div1-1 {
		display: flex;
	}

	.div1-1-p1 {
		font-size: 18px;
	}

	.div1 .addhotpic {
		width: 300px;
		color: white;
		background-color: #87ceeb;
	}

	.div1 button {
		border: none;
		width: 100px;
		color: #87ceeb;
		height: 38px;
		margin-top: 7px;
		border-radius: 2px;
		background-color: white;
	}

	/* 刷新图标 */
	.el-icon-refresh-right {
		color: white;
		font-size: 22px;
	}

	.hotpicadd hr {
		border: 1px gainsboro solid;
	}

	.hotpicadd .big {
		display: flex;
		margin: 10px 35px;
	}
</style>